<template>
  <div id="Servicedetails">
    <group label-width="5.5em">
      <!--<popup-picker title="规　　格" placeholder="请选择" :data="guigeList" v-model="size" value-text-align="left"></popup-picker>-->
      <x-input title="规　　格" disabled v-model="size"></x-input>
    </group>

    <group label-width="5.5em">
      <!--<popup-picker title="规　　格" placeholder="请选择" :data="guigeList" v-model="size" value-text-align="left"></popup-picker>-->
      <x-input title="生<b>&nbsp;</b> 产<b>&nbsp;</b> 码" disabled v-model="makeNum"></x-input>
    </group>
    <group label-width="5.5em">
      <!--<datetime title="生产日期" v-model="makeTime" value-text-align="left"></datetime>-->
      <x-input title="生产日期" display v-model="makeTime"></x-input>
    </group>
    <group label-width="5.5em">
      <!--<datetime title="生产日期" v-model="makeTime" value-text-align="left"></datetime>-->
      <x-input title="使用月数" disabled v-model="makeTime"></x-input>
    </group>
    <group label-width="5.5em">
      <!--<popup-picker title="保修类别" placeholder="请选择" :data="guigeList" v-model="size" value-text-align="left"></popup-picker>-->
      <x-input title="保修类别" display v-model="baoSize"></x-input>
    </group>
    <group class="speed">
      <cell title="问题描述（必选，可多选）" @click.native="showDig" is-link>
      </cell>
    </group>
    <group class="wa-sel">
      <checker
        v-model="problem"
        type="checkbox"
        default-item-class="problem-item"
        selected-item-class="problem-item-selected"
        style="padding: 15px 15px 0px;margin-right: -10px"
      >
        <checker-item style="margin-bottom: 6px" v-for="(i,v) in problemList" :key="v" :value="i">{{i}}</checker-item>
      </checker>
      <x-textarea placeholder="问题描述（选填)" :show-counter="false" :rows="3"></x-textarea>
    </group>
    <x-button type="primary" style="margin: 30px auto 0" action-type="button" @click.native="listSubmit">提交</x-button>

    <div v-transfer-dom>
      <x-dialog v-model="showToast" hide-on-blur class="dialog-box" :dialog-style="{'overflow': 'visible', 'border-radius': '8px','max-width':'600px'}">
        <div>
          <h3 class="dialog-title">问题描述（必选）</h3>
          <checker
          v-model="problem"
          type="checkbox"
          default-item-class="problem-item"
          selected-item-class="problem-item-selected"
          style="padding: 5px 10px 30px 30px"
          >
          <checker-item style="margin-bottom: 6px" v-for="(i,v) in problemList" :key="v" :value="i">{{i}}</checker-item>
          </checker>
        </div>
        <div @click="showToast=false">
          <span class="vux-close"></span>
        </div>
      </x-dialog>
    </div>
  </div>
</template>

<script>
  import {  Cell , Group,GroupTitle,XInput,Datetime,PopupPicker,XDialog, Checker, CheckerItem,XTextarea,XButton,XSwitch,TransferDomDirective as TransferDom } from 'vux'
  export default {
    name: "service-details",
    directives: {
      TransferDom
    },
    components: {
      Group,
      Cell,
      GroupTitle,
      XInput,
      Datetime,
      PopupPicker,
      XDialog,
      Checker,
      CheckerItem,
      XTextarea,
      XButton,
      XSwitch
    },
    data(){
      return{
        submitTime:'2017-06-01',
        makeTime:'2017-06-01',
        size:'6-DZM-12',
        makeNum:'DZ66995550',
        guigeList:[['6-DZM-12','1','2']],
        baoSize:'6-DZM-12',
        problem: [2, 3],
        problemList:['破损','漏液','变形','断路','跑不远','其他'],
        business:'浙江镇江超威集团',
        businessTel:'133******0021',
        showToast:false
      }
    },
    computed:{

    },
    created () {
      let vue = this
      vue.updateTitle('申请售后');
      vue.updateGreenRightNum(0);
    },
    mounted(){

    },
    methods: {
      doShowToast () {
        this.$vux.toast.show({
          text: 'toast'
        })
      },
      showDig(){
        this.showToast=true;
      }
    }
  }
</script>

<style lang="less" scoped>
  @import '~vux/src/styles/close';
  @hong:#cf0808;
  @blue:#1babe3;
  @green:#51ac33;
  .slo{
    color: @green;
    margin-right: 10px;
  }
  .wa-sel{
    .problem-item {
      display: none;
      margin-right: 10px;
      padding:6px  22px;
      border: 0px;
      background:#F5F5F5 url("../../assets/images/quxiao.png") no-repeat;
      background-size:14px 14px;
      color: #646464;
      font-size: 14px;
    }
    .problem-item-selected {
      display: inline-block;
      width: 78px;
      text-align: center;
      padding:6px  0px;
    }
  }

  .dialog-box {
    .weui-dialog{
      border-radius: 8px;
      padding-bottom: 8px;
    }
    .dialog-title {
      line-height: 25px;
      text-align: left;
      padding: 8px 20px;
      font-size:15px;
      border-bottom: 1px solid #D9D9D9;
      color: #333;
    }
    .img-box {
      height: 350px;
      overflow: hidden;
    }
    .vux-close {
      position: absolute;
      bottom: -20px;
      left: 50%;
      margin-left: -20px;
      display: block;
      width: 40px;
      height: 40px;
      background:url("../../assets/images/xuanzhong.png") no-repeat;
      background-size: 40px 40px;
    }
    .vux-close:before, .vux-close:after{
      width:0px;
      height: 0px;
    }
    .problem-item {
      display: block;
      width: 90%;
      height: 35px;
      line-height: 35px;
      text-align: left;
      border: 0px;
      background: #ffffff url(../../assets/images/no-sel.png) no-repeat right;
      background-size:14px 14px;
      color: #646464;
      font-size: 14px;
    }
    .problem-item-selected {
      display: block;
      background: #ffffff url(../../assets/images/yes-sel.png) no-repeat right;
      background-size:14px 14px;
    }
  }
</style>
